<template>
  <div>
    <!-- 我是采购入库页面 -->
    <div class="buju">
       <div class="caidanming"><strong>药品进销存 /</strong>采购入库</div>
      <div class="title">采购入库</div>
      <!-- 搜索框 -->
      

      <div class="nei1">
        <!-- 选择器 -->
        <!-- 日期选择器 -->
        <el-button @click="dialogFormVisible = true" class="btn" >采购</el-button>
        <el-row>
            <el-col :span="7" :offset="2" style="line-height: 40px;margin-left:1.5%">
             <span> 订单编号：<span class="serial">{{serial}}</span></span>
            </el-col>>
          <el-col :span="5">
              
              
          </el-col>
          <el-col :span="15"  style="line-height:40px;">
                <el-col :span="20" style="margin-left:80%">
                    <span class="time-wen">总金额:<span style="margin-left:1%;color:red">{{sumPrice}}</span></span>
                </el-col>
          </el-col>

          <el-col :span="1" >
                <el-button @click="tijiao()" class="btn">提交</el-button>
          </el-col>       
        </el-row>
         <!-- --------------------------------模态框 ------------------------------->
        <div class="motaikuang">
          <el-dialog
            title="选择药品"
            :visible.sync="dialogFormVisible"
            width="950px"
          >
            <el-form :model="form">
              <div class="section1-1">
                <i class="el-icon-search"></i>
                <input type="text" placeholder="药品检索" class="input2" />
              </div>
              <div class="section1-2">
                <el-select v-model="value2" placeholder="药品类型">
                  <el-option
                    v-for="item in ypdanwei"
                    :key="item.unit_id"
                    :label="item.unit_name"
                    :value="item.unit_id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </div>
              <!-- 表格 -->
              <div class="section2">
                <el-table
                  ref="multipleTable"
                  :data="newList"
                  tooltip-effect="dark"
                  style="font-size: 13px"
                  @selection-change="handleSelectionChange"
                  :row-style="{ height: '60px' }"
                  :header-cell-style="{
                    color: '',
                    borderBottom: '2px solid #39b9ae',
                  }"
                >
                  <!-- 勾选框 -->
                  <el-table-column algin="center"
                    type="selection"
                    width="50"
                  ></el-table-column>
                  <el-table-column algin="center"
                    prop="drug_name"
                    label="药品名称"
                    width="210"
                  ></el-table-column>
                  <el-table-column algin="center"
                    prop="drug_quantity"
                    label="药品规格"
                    width="210"
                  ></el-table-column>
                  <el-table-column algin="center"
                    prop="pharmaceutical_manufacturer"
                    label="生产厂家"
                    width="210"
                  ></el-table-column>
                  <el-table-column algin="center"
                    prop="drug_price"
                    label="药品单价"
                    width="210"
                  ></el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="paging">
                  <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-size="pageNum"
                    layout="prev, pager, next, jumper"
                    :total="drugList"
                  ></el-pagination>
                </div>
              </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false" class="btnbtn1"
                >取 消</el-button
              >
              <el-button type="primary" @click="aa()" class="btnbtn2"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </div>
        <!-- --------------------------------模态框结束分界线-------------------------------- -->
      </div>

      <!-- 表格 -->
      <div class="section2">
        <el-table
          ref="multipleTable"
          :data="newList1"
          tooltip-effect="dark"
          style="font-size: 13px"
          fit
          @selection-change="handleSelectionChange"
          :row-style="{ height: '60' }"
          :header-cell-style="{ color: '', borderBottom: '2px solid #39b9ae' }"
        >
          <el-table-column algin="center"
            prop="drug_name"
            label="药品名称"
           
          ></el-table-column>
          <el-table-column algin="center"  label="采购数量">
            <template slot-scope="scope">
                <el-input  class="numbers" style="width:45%"  v-model="scope.row.purchasing_medicine_number"  @change="number(scope.row.purchasing_medicine_number)" placeholder="0">{{0}}</el-input>
            </template>
            
          </el-table-column>
          <el-table-column algin="center"
            prop="drug_quantity"
            label="药品规格"
            
          ></el-table-column>
          <el-table-column algin="center"
            prop="pharmaceutical_manufacturer"
            label="生产厂家"
            
          ></el-table-column>
          <el-table-column algin="center"
            prop="drug_price"
            label="药品单价"
          ></el-table-column>
          <el-table-column align="center"  prop="" label="总价"  >
                <template slot-scope="scope">
                        <span class="pricesss" :class="{pricesss1:isColor}">{{scope.row.purchasing_medicine_number*scope.row.drug_price}}</span>
                </template> 
          </el-table-column>
          <el-table-column algin="center" label="操作">
            <template slot-scope="scope">
                  <el-button type="danger" icon="el-icon-delete " @click.native="deleteOne(scope.row,newList1)" circle></el-button>
            </template>
        
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      // 模态框
      dialogTableVisible: false,
      dialogFormVisible: false,
      isColor:false,
      drugList: 0,
      ypdanwei: [],
      input: '',
      sumPrice:'',
      serial:'',
      nowtime:'',
      cgnumbers:'',
      drugPriceSum:'',
      biaoshi:0,
      form: {
        name: '',
        age: '',
        xingbie: '',
        bingzheng: '',
        chufang: '',
        tell: '',
        dizhi: '',
        date1: '',
        date2: '',
        yishi: '',
        beizhu: '',
        type: [],
      },
      formLabelWidth: '120px',
      //   选择器
      options: [
        {
          value: '选项1',
          label: '片',
        },
        {
          value: '选项2',
          label: '剂',
          // disabled: true,
        },
        {
          value: '选项3',
          label: '颗粒',
        },
        {
          value: '选项4',
          label: '粉',
        },
        {
          value: '选项5',
          label: '膏',
        },
      ],
      value: '',
      // 供应商
      options2: [
        {
          value: '选项1',
          label: '阿莫西林2',
        },
        {
          value: '选项2',
          label: '苯海拉明注射液2',
        },
        {
          value: '选项3',
          label: '氯雷他定片2',
        },
        {
          value: '选项4',
          label: '999感冒颗粒2',
        },
        {
          value: '选项5',
          label: '鼻炎片2',
        },
      ],
      value2: '',
      // 日期选择器
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            },
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            },
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            },
          },
        ],
      },
      value11: '',
      value22: '',
      // 表格
      pageNum: 6,
      nowPage: 0,
      newList: [],
      newList1: [],
      multipleSelection: [],
      currentPage: 1,
    };
  },
  mounted() {
    //  获取到的总数据分页
    axios.get('http://localhost/drug/findAllDrugs', {}).then((r) => {
      this.drugList = r.data.count;
      console.log(r.data.count);
      console.log(r.data.data);
      this.newList = r.data.data;
      //   this.drugList=JSON.parse(JSON.stringify(r.data.staffList));
      // this.getPage(1);
    });
    
    // 药品分类
    axios
      .post('http://localhost/Unit/findDrugType', {})

      .then((r) => {
        this.ypdanwei = r.data.data; //
        // 打印拿到的细化后的要遍历的几条数据
      });
  },
  methods: {

    aa() {
      this._data.dialogFormVisible = false;
      this.multipleSelection.forEach((item,index,arr)=>{
        if(this.newList1.indexOf(item)===-1){
         
          this.newList1.push(item);
        }
      });
      
      var testDate = new Date();
      var time='';
      time+=testDate.getFullYear();
      time+=testDate.getMonth();
      time+=testDate.getDate();
      time+=testDate.getDay();
      time+=testDate.getTime();
      this.serial=time;
     
    },
    deleteOne(index,rows){
       rows.splice(index, 1);
       console.log(index);
        
    },
    tijiao(){
        console.log(this._data.newList1);
        console.log(this.number);
        axios.post('http://localhost/po/insertPo', {
        po_serial:this.serial,
        po_total_prices:this.sumPrice,
        purchasingMedicines:this._data.newList1
      // po_total_prices: this.sumPrice
      
      }).then((r) => {
          console.log(r);
          if(r.data.code===200){
            this.$message({
            showClose: true,
            message: '采购成功,正在生成订单:'+this.serial,
            type: 'success'
          });
          this.newList1=[];
          this.serial='';
          this.sumPrice='';
        }
          
      });

    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    handleCurrentChange(val) {
      // console.log(val);
      // this.getPage(val);
      // this.getPage(val);

      console.log(this._data);
      this._data.index1 = parseInt(val);
      // let num=parseInt(val);
      axios
        .get('http://localhost/drug/findAllDrugs', {
          params: {
            drug_name: this._data.filterText,

            drug_classification_control_id: '',
            pageIndex: this._data.index1,
            pageCount: 6,
          },
        })
        .then((r) => {
          console.log(r);
          this.newList = r.data.data;
        });
    },
    number(a){
      this.biaoshi=1;
      this.sumPrice=0;
      this.newList1.forEach(row=>{
        if(Number(row.purchasing_medicine_number)>0){
            this.drugPriceSum=row.drug_price*row.purchasing_medicine_number;
            this.sumPrice+=row.drug_price*row.purchasing_medicine_number;
        }
        
      });
      this.isColor=true;
    }
  },

};
</script>
<style scoped>
* {
  padding: 0;
  margin: 0;
}

/* 模态框的内容样式 */
.section1-2 {
  position: relative;
  top: -40px;
  left: 700px;
}
.section1-2 >>> .el-input__inner {
  width: 170px;
}
.el-input >>> .el-input__inner {
  width: 80 px;
}
.input2 {
  width: 150px;
  height: 30px;
  border: none;
  margin-left: 10px;

}
/* 确定取消按钮 */
.btnbtn2 {
  width: 75px;
  height: 40px;
  background-color: #39b9ae;
  border:1px solid #39b9ae;
}
.btnbtn1{
   width: 75px;
  height: 40px;
}
.btnbtn1 :hover{
color:#39b9ae;
}


/* 搜索框 */
.section1-1 {
  border-bottom: 1px solid gainsboro;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 278px;
  
}
.pricesss{
  color:#fff;
}
.pricesss1{
  color: red;
}
.input1 {
  width: 210px;
  height: 40px;
  border: none;
  margin-left: 10px;
  /* font-size: 17px; */
}
input:focus {
  border: none;
  outline: none;
}
.nei1 {
  /* border: 1px solid yellow; */
  margin: 10px 0px 0px 0px;
  position: relative;
  top: 10px;
  right: 10px;
}
/* 日期选择器 */
.wai-block {
  display: inline-block;
  margin: 0px 10px;
}
.block1 {
  display: inline-block;
}
.block2 {
  display: inline-block;
}
.block1 >>> .el-input__inner {
  width: 140px !important;
}
.block1 >>> .el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
  width: 140px;
}
.block2 >>> .el-input__inner {
  width: 140px !important;
}
.block2 >>> .el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
  width: 140px;
}

.time-wen {
  font-size: 16px;
}
.btn {
  width: 90px;
  height: 40px;
  border: 1px solid #39b9ae;
  color: #39b9ae;
  /* font-size: 15px; */
  margin-left: 20px;
  background-color: #ffffff;
  outline: none;
  position: relative;
  top: 0px;
  right: 10px;

}
/* 表格 */
.section2 {
  /* border:1px solid blue; */
  position: relative;
  top: 25px;
  left: 0px;
}
.paging {
  margin-top: 30px;
  margin-left: 20%;
}
.price{
  color:red;
  font-weight: bolder;
}
.xialakuang >>> .el-select-dropdown.el-popper {
  width: 20px;
}
/* 外边距的顺序: 上 左 下 右 */
.caidanming {
  margin: 10px 0px 10px 10px;
}
.title {
  font-size: 30px;
  margin-top: 20px;
  font-weight: bold;
  margin: 20px 50px 25px 10px;
}


/* .caozuo>>>.el-dropdown-item{
  width: 20px;
} */
</style>